<template>
    <div class="tabs">
        <slot></slot>
    </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component, Prop, Provide} from "vue-property-decorator";

  @Component
  export default class Tabs extends Vue {
    @Prop({type: String, required: true}) selectedNav: string;
    @Prop({
      type: String, default: "horizontal",
      validator(value): boolean {return ["horizontal", "vertical"].indexOf(value) >= 0;}
    }) direction: string;
    eventsBus: any = new Vue();
    @Provide() eventBus? = this.eventsBus;

    created() {
      if (this.eventBus) {
        this.eventBus.$on("update:selected-nav", (tabName) => {
          this.$emit("update:selected-nav", tabName);
        });
      }
    }

    mounted() {
      if (this.$children.length === 0) {
        console?.warn?.("tabs的组件应该是tabs-nav,tabs-content,但是你没有写子组件");
      }
      this.$children.forEach((vm) => {
        if (vm.$options.name === "TabsNav") {
          vm.$children.forEach((childVm:any) => {
            if (childVm.$options.name === "TabsItem" && childVm.name === this.selectedNav) {
              this.eventBus.$emit("update:selected-nav", this.selectedNav, childVm);
            }
          });
        }
      });
    }


  }
</script>

<style lang="scss" scoped>

</style>







